<template>
  <div class="right2">
    <div class="bt">
      <div class="tit1">{{ title }}</div>
      <select v-model="selected" @change="updateChart">
        <option v-for="(option, index) in options" :value="index">{{ option }}</option>
      </select>
    </div>
    <div class="rightTwo" ref="chartsRef"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import {onMounted, ref} from "vue";

const title = "农作物产量"
const options = ['2019', '2020', '2021', '2022'];
let selected = 0;

const chartData = [
  {
    year: '2019',
    data: [
      {name: '玉米', value: 786345.8},
      {name: '水稻', value: 4964418.0},
      {name: '大豆', value: 700918.0}
    ]
  },
  {
    year: '2020',
    data: [
      {name: '玉米', value: 862256.4},
      {name: '水稻', value: 4155853.0},
      {name: '大豆', value: 660494.0}
    ]
  },
  {
    year: '2021',
    data: [
      {name: '玉米', value: 836150.5},
      {name: '水稻', value: 4965048.0},
      {name: '大豆', value: 823874.0}
    ]
  },
  {
    year: '2022',
    data: [
      {name: '玉米', value: 809280.8},
      {name: '水稻', value: 4972199.0},
      {name: '大豆', value: 742177.0}
    ]
  }
];

const chartsRef = ref(null)
const renderChart = () => {
  const chart = echarts.init(chartsRef.value);
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {type: 'shadow'}
    },
    grid: {left: "5%", top: "20%", bottom: "15%", right: "20%", containLabel: true},
    xAxis: {
      type: 'value',
      show: false
    },
    yAxis: {
      name: '单位：吨',
      nameTextStyle: {
        color: 'white'
      },
      axisLabel: {
        color: '#fff'
      },
      type: 'category',
      data: chartData[selected].data.map(item => item.name)
    },
    splitLine: {
      show: false,
    },
    label: {
      show: true,
      position: 'right'
    },
    series: [
      {
        type: 'bar',
        data: chartData[selected].data.map(item => item.value),
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        },
        barWidth: '30%',

      }
    ]
  }
  chart.setOption(option);
};
onMounted(() => renderChart())

const updateChart = () => {
  renderChart();
};

</script>

<style lang="scss" scoped>
.right2 {
  width: 25%;
  height: calc(100% / 3 - 57px);
  background-image: url("@/assets/img/backg1.png");
  background-size: 100% 100%;
  position: fixed;
  top: calc(100% / 3 + 61px);
  float: left;
}

.rightTwo {
  height: 100%;
  margin: 25px auto auto auto;
  width: 110%
}

.bt {
  width: calc(100% - 24px);
  height: 40px;
  margin-left: 24px;
  float: left;
  line-height: 40px;
}

.tit1 {
  width: auto;
  height: 40px;
  padding-right: 4px;
  font-size: 13px;
  font-weight: bold;
  background: linear-gradient(to top, #78bcf7, #f9fcff);
  -webkit-background-clip: text;
  color: transparent;
  float: left;
  /*定义文本颜色为透明*/
}
</style>
